<template>
  <!-- 三十二、添加商品页面 -->
  <div class="addproduct_container">
    <div class="addproduct_box">
      <div class="box_init">
        <!-- 32.1顶部 使用 element-plus 里面的 Setps步骤条 -->
        <div class="steps">
          <el-steps :active="active" align-center finish-status="success">
            <el-step title="填写商品信息" />
            <el-step title="填写商品促销" />
            <el-step title="填写商品属性" />
            <el-step title="选择商品关联" />
          </el-steps>
        </div>

        <!-- 将ref挂载到子组件身上 -->
        <!-- 32.3引入每个步骤的子组件，去到 stepsChild1.vue -->
        <stepsChild1 v-show="active === 0" ref="stepsChild1Ref" />
        <stepsChild2 v-show="active === 1" ref="stepsChild2Ref" />
        <stepsChild3 v-show="active === 2" ref="stepsChild3Ref" />
        <stepsChild4 v-show="active === 3" ref="stepsChild4Ref" :active="active" />

        <!-- 按钮 -->
        <div class="nextbtn">
          <div class="step1_btn" v-show="active === 0">
            <!-- <el-button style="margin-top: 12px" @click="nextStep" type="primary">下一步，填写商品促销</el-button> -->
            <el-button style="margin-top: 12px" @click="next" type="primary">下一步，填写商品促销</el-button>
          </div>
          <div class="step1_btn" v-show="active === 1">
            <el-button style="margin-top: 12px" @click="prev" type="primary">上一步，填写商品信息</el-button>
            <el-button style="margin-top: 12px" @click="next" type="primary">下一步，填写商品属性</el-button>
          </div>
          <div class="step1_btn" v-show="active === 2">
            <el-button style="margin-top: 12px" @click="prev" type="primary">上一步，填写商品促销</el-button>
            <el-button style="margin-top: 12px" @click="next" type="primary">下一步，填写商品关联</el-button>
          </div>
          <div class="step1_btn" v-show="active === 3">
            <el-button style="margin-top: 12px" @click="prev" type="primary">上一步，填写商品属性</el-button>
            <!-- 点击完成提交商品的时候发送请求 -->
            <el-button style="margin-top: 12px" @click="dialogVisible = true" type="primary">完成，提交商品</el-button>
            <!-- <el-button style="margin-top: 12px" @click="submitForm" type="primary">完成，提交商品</el-button> -->

            <!-- 弹出 dialog -->
            <el-dialog v-model="dialogVisible" title="提示" width="24%" :before-close="handleClose">
              <div class="txt">
                <el-icon :size="20" color="#e2a03c">
                  <WarningFilled />
                </el-icon>
                <span>是否要提交该产品</span>
              </div>
              <template #footer>
                <span class="dialog-footer">
                  <el-button @click="dialogVisible = false">取消</el-button>
                  <el-button type="primary" @click="submitForm">
                    确定
                  </el-button>
                </span>
              </template>
            </el-dialog>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>
<script setup lang='ts'>
import { ApiCreateProduct } from '@/http/pms/api'
import stepsChild1 from '@/views/pms/components/addProductChild/stepsChild1.vue'
import stepsChild2 from '@/views/pms/components/addProductChild/stepsChild2.vue'
import stepsChild3 from '@/views/pms/components/addProductChild/stepsChild3.vue'
import stepsChild4 from '@/views/pms/components/addProductChild/stepsChild4.vue'
import { ref } from 'vue'
import { WarningFilled } from '@element-plus/icons-vue'
// @ts-ignore
import { ElMessageBox, ElMessage } from 'element-plus';
import { useRouter } from 'vue-router'
const router = useRouter()

// const active = ref(0)
const active = ref(0)

// 获取到子组件的数据
const stepsChild1Ref = ref<any>([])
const stepsChild2Ref = ref<any>()
const stepsChild3Ref = ref<any>()
const stepsChild4Ref = ref<any>()

const valueFn = (params: any) => {
  console.log(params)
  active.value++
}

const next = async () => {
  if (active.value === 0) {
    console.log(stepsChild1Ref.value.test)
    stepsChild1Ref.value.test(valueFn)
  } else {
    active.value++
    if (active.value++ > 2) active.value = 0
  }
}
const prev = () => {
  if (active.value-- < 0) active.value = 0
}

// 将三个子组件的form表单数据存起来
const newform = ref({})

const dialogVisible = ref(false)

// 点击按钮弹框
const handleClose = (done: () => void) => {
  done()
}

// 完成提交的按钮点击事件
const submitForm = () => {
  // console.log('完成');
  // 新的表单数据
  newform.value = { ...stepsChild1Ref.value.form, ...stepsChild2Ref.value.form, ...stepsChild3Ref.value.form }

  dialogVisible.value = false

  ApiCreateProduct(newform.value).then(res => {
    // console.log(res);
    if (res.code === 200) {
      // 弹出提示框
      ElMessage({
        type: 'success',
        message: "修改成功"
      })
      // console.log(res);
      // 路由跳转
      router.push('/pms/addProduct')
      // 调跳回step1
      // 清空数据
      stepsChild1Ref.value.ruleForm.resetFields()
      stepsChild2Ref.value.ruleForm.resetFields()
      stepsChild3Ref.value.ruleForm.resetFields()
      stepsChild4Ref.value.data = []
      stepsChild4Ref.value.subData = []
      stepsChild4Ref.value.value = []
      stepsChild4Ref.value.value1 = []
      active.value = 0
    }
  })


  // const dis = {
  //   "albumPics": "",
  //   "brandId": 106,
  //   "brandName": "sss",
  //   "deleteStatus": 0,
  //   "description": "",
  //   "detailDesc": "",
  //   "detailHtml": "",
  //   "detailMobileHtml": "",
  //   "detailTitle": "",
  //   "feightTemplateId": 0,
  //   "flashPromotionCount": 0,
  //   "flashPromotionId": 0,
  //   "flashPromotionPrice": 0,
  //   "flashPromotionSort": 0,
  //   "giftPoint": 0,
  //   "giftGrowth": 0,
  //   "keywords": "",
  //   "lowStock": 0,
  //   "name": "阿萨德刚",
  //   "newStatus": 0,
  //   "note": "",
  //   "originalPrice": 0,
  //   "pic": "",
  //   "memberPriceList": [
  //     {
  //       "memberLevelId": 1,
  //       "memberLevelName": "黄金会员"
  //     },
  //     {
  //       "memberLevelId": 2,
  //       "memberLevelName": "白金会员"
  //     },
  //     {
  //       "memberLevelId": 3,
  //       "memberLevelName": "钻石会员"
  //     }
  //   ],
  //   "productFullReductionList": [
  //     {
  //       "fullPrice": 0,
  //       "reducePrice": 0
  //     }
  //   ],
  //   "productLadderList": [
  //     {
  //       "count": 0,
  //       "discount": 0,
  //       "price": 0
  //     }
  //   ],
  //   "previewStatus": 0,
  //   "price": 0,
  //   "productAttributeCategoryId": null,
  //   "productAttributeValueList": [],
  //   "skuStockList": [],
  //   "subjectProductRelationList": [],
  //   "prefrenceAreaProductRelationList": [],
  //   "productCategoryId": 119,
  //   "productCategoryName": "999",
  //   "productSn": "",
  //   "promotionEndTime": "",
  //   "promotionPerLimit": 0,
  //   "promotionPrice": null,
  //   "promotionStartTime": "",
  //   "promotionType": 0,
  //   "publishStatus": 0,
  //   "recommandStatus": 0,
  //   "sale": 0,
  //   "serviceIds": "",
  //   "sort": 0,
  //   "stock": 0,
  //   "subTitle": "阿萨德刚",
  //   "unit": "",
  //   "usePointLimit": 0,
  //   "verifyStatus": 0,
  //   "weight": 0
  // }
  // let count = 0;
  // function deepDis(o1: any, o2: any) {
  //   for (let key in o1) {
  //     count++;
  //     console.log(key)
  //     if (typeof o1[key] === 'object') {
  //       deepDis(o1[key], o2[key]);
  //     } else {
  //       let has = Object.keys(o2).includes(key);
  //       if (!has) {
  //         console.log('=============', key)
  //       }
  //     }
  //   }
  // }
  // deepDis(newform.value, dis);
  // console.log(count)

  // console.log(newform)
  // console.log(stepsChild1Ref.value.form);
  // 处理 params 的数据
  // newDate.value = {
  //   // id: stepsChild1Ref.value.id,
  //   productCategory: stepsChild1Ref.value.form.productCategory,
  //   name: stepsChild1Ref.value.form.name,
  //   subTitle: stepsChild1Ref.value.form.subTitle,
  //   brandId: stepsChild1Ref.value.form.brandId
  // }
  // console.log(newDate.value)

}

</script>
<style lang="less" scoped>
// 32.2写样式
.addproduct_container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  .addproduct_box {
    width: 835px;
    padding: 35px;
    box-sizing: border-box;
    border-radius: 4px;
    border: 1px solid #ebeef5;

    .box_init {
      padding: 20px;

    }
  }

  .nextbtn {
    display: flex;
    justify-content: center;
  }
}
</style>